<template>
	<div class="upload">
		<el-upload 
			ref="uploadActivePic" 
			:limit="limit" 
			:action="uploadPicUrl" 
			:data="{folder: 'activity/images'}" 
			list-type="picture-card" 
			:file-list="fileList"
			:on-exceed="limitPic" 
			:before-upload="checkPicSize" 
			:on-success="handleSuccess"
			 :on-preview="handlePictureCardPreview" 
			 :on-remove="handleRemove">
			<i class="el-icon-plus"></i>
			
		</el-upload>
		<el-dialog :visible.sync="dialogVisible" :lock-scroll="false">
		  <img width="100%" :src="activeImgUrl" alt="" v-if="activeImgUrl">
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			limit: {
				type: Number,
				default: 10
			},
			size: {
				type: Number,
				default: 1
			},
			fileList: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		data() {
			return {
				uploadPicUrl: `${this.url}/upload/image_save.action`, //图片上传url
				activeImgUrl: "",
				dialogVisible: false, 	//查看照片大图时候的对话框触发变量
				imgIds: ""				//图片上传成功时候的id字符串
			};
		},
		methods: {
			/*预览图片*/
			handlePictureCardPreview(file) {
				this.advertImgUrl = "";
				if(!file.response) {
					this.$message({
						type: "warning",
						message: "图片还未上传成功,请耐心等待"
					});
					return;
				}
				if(file.response.success) {
					this.activeImgUrl = file.response.result.url;
				}
				this.dialogVisible = true;
			},
			/*删除图片*/
			handleRemove(file, fileList) {
				if(!file.response) return;
				var url = `${this.url}/upload/image_remove.action`; //请求url
				var params = {
					image_resource_id: file.response.result.id
				};
				this.$http.get(url, { params }).then((res, err) => {
					if(res.data.success) {
						var id = [];
						fileList.forEach((val) => {
							if(val.response) {
								id.push(val.response.result.id);
							}
						});
						
						this.$message({
							type: "success",
							message: "删除成功"
						});
						this.imgIds = id.join(",");
						this.$emit("getImgIds", this.imgIds);
					}
				});
			},
			/*图片上传成功的处理函数*/
			handleSuccess(res, file, fileList) {
				var id = [];
				fileList.forEach((val) => {
					if(val.response) {
						id.push(val.response.result.id);
					}
				});
				this.imgIds = id.join(",");
				this.$emit("getImgIds", this.imgIds);
			},
			/*上传之前检查图片格式*/
			checkPicSize(file) {
				const isLtnM = file.size > 1024 * 1024 * this.size;
				const isJpg = file.type === 'image/jpeg';
				const isPng = file.type === 'image/png';
				if(isLtnM) {
					this.$message({
						type: "warning",
						message: `图片大小限制为${this.size}M`
					});
				} else if(!isJpg && !isPng) {
					this.$message({
						type: "warning",
						message: "图片类型只能为jpg或者png"
					});
				}
				return !isLtnM && (isJpg || isPng);
			},
			/*超出图片个数限制的时候*/
			limitPic() {
				this.$message({
					type: "warning",
					message: `图片个数限制为${this.limit}张`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>